<template>
  <div>
    <div class="header">
      <div>
        <h4 style="display: inline-block;margin-right:10px">待办任务</h4>
        <el-tooltip class="item" effect="light" placement="right-end">
          <template #content>
            <p>待取件率=待取件/(下单数量-取消数量)，且取件类型=上门取件</p>
            <p>待派送率=待派送/(待派送+派送中+已签收+拒收)</p>
            <p>未分配率=未分配/全部数据</p>
            <p>超时率=超时任务/(已完成+进行中+已取消）</p>
          </template>
          <el-button type="text" icon="el-icon-question" />
        </el-tooltip>
      </div>
      <span class="time">
        <i style="font-style: normal;"><el-button type="text" :loading="flag" @click="reflesh">
          <template>
            <i v-if="!flag" class="el-icon-refresh" />
          </template>
        </el-button>{{ time }} - 2023-09-12 23:59</i>
      </span>
    </div>
    <div class="content">
      <div id="chart1" />
      <div id="chart2" />
      <div id="chart3" />
      <div id="chart4" />
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import * as echarts from 'echarts'
import 'echarts-liquidfill'
export default {
  data() {
    return {
      flag: false,
      time: new Date().toLocaleString().replaceAll('/', '-')
    }
  },
  computed: {
    ...mapGetters('dashboard', ['listData']),
    list() {
      return this.listData.backlog ? this.listData.backlog : {}
    }
  },
  watch: {
    list: {
      deep: true,
      handler() {
        console.log(this.list.waitingPickupRate)
        // 初始化 echarts 实例
        const chart1 = echarts.init(document.getElementById('chart1'))
        const chart2 = echarts.init(document.getElementById('chart2'))
        const chart3 = echarts.init(document.getElementById('chart3'))
        const chart4 = echarts.init(document.getElementById('chart4'))
        chart1.setOption(this.fn(this.list.waitingPickupRate, ['#e25c3e', '#ffe5e0', '#ea8b77'], ['待取件', this.list.waitingPickupNumber]))
        chart2.setOption(this.fn(this.list.waitingDispatchRate, ['#ffc45d', '#fff1d9', '#fed287'], ['待派件', this.list.waitingDispatchNumber]))
        chart3.setOption(this.fn(this.list.unassignedTransportTaskRate, ['#ff9b41', '#ffead7', '#fe993e'], ['未分配运输', this.list.unassignedTransportTaskNumber]))
        chart4.setOption(this.fn(this.list.timeoutTransportTaskRate, ['#fef39a', '#fafade', '#f3eab4'], ['超时运输', this.list.timeoutTransportTaskNumber]))
      }
    }
  },
  methods: {
    ...mapActions('dashboard', ['getData']),
    async reflesh() {
      this.flag = true
      try {
        await this.getData()
      } catch (error) {
        this.$message.error('刷新失败，请重试')
        this.flag = false
      }
      this.$message.success('刷新成功')
      this.flag = false
      this.time = new Date().toLocaleString().replaceAll('/', '-')
    },

    fn(val, color, text) {
      return {
        color: ['#67C23A'],
        series: [{
          type: 'liquidFill',
          data: [val / 100], // 填充的数据值，范围在[0, 1]之间
          radius: '80%', // 水球图的半径
          shape: 'circle', // 水球的形状，可以是 'circle' 或 'rect'
          color: [color[0]], // 水球的颜色
          backgroundStyle: {
          // 水球图的背景颜色，设为透明
            color: color[1]
          },
          outline: {
            show: true,
            borderDistance: 6, // 内外边框的距离
            itemStyle: {
              borderWidth: 1, // 外侧边框宽度
              borderColor: color[2] // 外侧边框颜色
            }
          },
          label: {
            show: true,
            fontSize: 20,
            insideColor: '#fff' // 水球内部文本的颜色
          }
        }],

        graphic: [{
          type: 'text',
          left: 'center',
          top: '93%',
          style: {
            text: [
              '{a|' + text[0] + '}' + '  ' +
              '{b|' + text[1] + '}' // 使用b样式设置text[1]的颜色
            ],
            rich: {
              a: {
                font: '18px Arial',
                fill: '#000'
              },
              b: {
                font: '18px Arial',
                fill: color[0] // 设置text[1]的颜色为红色
              }
            }
          },
          onclick: () => {
            text[0] === '待取件' || text[0] === '待派件' ? this.$router.push({ name: 'Order-manage' }) : this.$router.push({ name: 'Order-manage' })
          }
        }]
      }

    // 绑定数据和配置项并渲染
    }
  }
}
</script>

<style lang="scss" scoped>
.header{
    h4{
        margin: 0;
    }
    display: flex;
    justify-content: space-between;
    .time{
    font-size: 14px;
    color: #818693;
    display: flex;
    -webkit-box-align: center;
    cursor: pointer;
    i{
      font-size: 14px;
    font-style: normal;
    }
    }
}
.content{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    height: 208px;
    margin-top: 12px;
    div{
        width: 25%;
        height: 220px;
    }
}
.el-icon-refresh{
  color: #e15638;
  font-weight: 900;
  font-size: 16px;
 }
 .lable{
  transform: translate(50px,0);
 }
</style>
